<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课程学生</title>
    <link href="/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/static/bootstrap-fileinput/css/fileinput.min.css" rel="stylesheet">
</head>
<body>

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">请选择Excel文件</h4>
                </div>
                <div class="modal-body">
                    <a href="/static/excelTemplate/template.xlsx" download="template.xlsx" class="form-control" style="border:none;">下载导入模板</a>
                    <form id="importForm" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-2 control-label">选择文件</label>
                            <div class="col-sm-10">
                                <input id="file" name="file" type="file" class="file" data-show-preview="false"
                                       data-show-upload="false"
                                       accept="application/vnd.sealed-xls, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button id="importGrade" type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="panel">
        <div class="panel-body">
            <div style="float: right">
                登录用户：<span  th:text="${session.user.name}"></span>
            </div>
            <h1 class="page-header" id="header"></h1>
            <div id="toolbar" class="btn-group">
                <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
                    导入Excel文件
                </button>
            </div>
            <div class="col-sm-12">
                <table id="table"></table>
            </div>
        </div>
    </div>

<script src="/static/util.js"></script>
<script src="/static/jquery/jquery.min.js"></script>
<script src="/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script src="/static/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/static/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<script src="/static/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="/static/bootstrap-fileinput/js/fileinput_locale_zh.js"></script>
<script>

    $(function () {

        const data = new Data();
        data.init();

        const table = $('#table');

        const tableData = new TableData(table);
        tableData.init();

        const buttonGroup = new ButtonGroup(tableData);
        buttonGroup.init();

    });

    const Data = function () {
        const object = {};

        object.init = function () {
            sendGetAjax('/api/course/info?courseId=' + getQueryString('id'), function (res) {
                $('#header').text(res.data.courseName + "的学生");
            })
        };

        return object;
    };

    const TableData = function (table) {
        const object = {};

        object.init = function () {
            tableInit({
                table: table,
                url: '/api/course/student?courseId=' + getQueryString('id'),
                columns: object.columns,
                sidePagination: 'client',
                queryParams: object.queryParams
            });
        };

        object.columns = [{
            title: '编号',
            field: 'id'
        }, {
            title: '学号',
            field: 'studentNum'
        }, {
            title: '学生名',
            field: 'name'
        }, {
            title: '性别',
            field: 'gender',
            formatter: function (val, row, index) {
                return val === 'man' ? '男' : '女';
            }
        }, {
            title: '总成绩',
            field: 'finalGrade'
        }, {
            title: '操作',
            clickToSelect: false,
            formatter: function (val, row, index) {

            }
        }];

        object.queryParams = function (params) {
            return {
                size: params.pageSize,
                page: params.pageNumber - 1
            };
        };

        object.refresh = function () {
            tableRefresh({table: table});
        };

        return object;
    };

    const ButtonGroup = function (data) {
        const object = {};

        object.init = function () {
            $('#importGrade').click(function () {
                if (confirm('您确定要上传所选择的文件？')) {
                    var formData = new FormData($("#importForm")[0]);
                    formData.append('courseId', getQueryString('id'))
                    uploadFile('/api/grade/upload', formData, function (res) {
                        $('#myModal').modal('hide');
                        data.refresh();
                    }, '#importGrade');
                }
            });
        };

        return object;
    };
</script>
</body>
</html>